<template>
	<view>
		<view class="person-performance fillx">
			<view class="person-item-wrap fillx bsp10 frcc t-bb-u" v-for="item in list" :key="item.id">
				<!-- <image class="person-item-avatar" src="../../../static/logo_abf.png" mode="scaleToFill"></image> -->
				<view class="person-item-info fillx fcsc">
					<view class="person-item-info-name fillx">{{item.member.realname||item.member.nickname}}</view>
					<view class="person-item-info-order-number fillx frcc m_fs">
						<text class="m_fcg">订单： {{item.order.order_no}}</text>
					</view>
					<view class="person-item-info-order-argu fillx frss m_fcg f fw">
						<view>
							<text>商品名称:{{item.order.order_name}}</text><br/>
							<text class="m_marginl10 m_fs fillx">数量：{{item.buy_num}}</text>
							<text class="m_fcg m_fs">{{item.created_at}}</text>
						</view>
					</view>
				</view>
				<text class="person-item-amount m_fcr frcc">￥{{item.amount}}</text>
			</view>
		</view>
		<uni-load-more :status="status" iconType="auto" v-show="!isLodingToast"></uni-load-more>
		<u-back-top :scroll-top="scrollTop" top="600" icon="arrow-up" tips="顶部"></u-back-top>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import uniLoadMore from '@/components/uni-ui/uni-load-more/uni-load-more.vue'
	
	export default {
		components:{
			uniLoadMore
		},
		data() {
			return {
				date:'',
				currentPage:1,
				status:'more',
				list:[],
				isLodingToast:false,
				isPullLoading:false,
				scrollTop:0
			}
		},
		methods: {
			...mapMutations(['getNetworkType', 'vuexRequest', 'setCode', 'setChatMsgNum']),
			getlist(date=this.date,page=this.currentPage){
				this.vuexRequest({
					url:'/api/addons/execute?route=agent/track-list&addon=o-s-mall-dist',
					method: 'GET',
					data: {'access-token':this.token,'date':date,'page':page,'per-page':10},
					success:(res)=>{
						//console.log(res)
						this.pageInfo=res.data.data.pageInfo
						if(page>1){
							this.list=this.list.concat(res.data.data.list)
							this.currentPage = res.data.data.pageInfo.currentPage;
						}else{
							this.list=res.data.data.list;
							this.currentPage = res.data.data.pageInfo.currentPage;
						}
						if(this.isPullLoading){
							uni.stopPullDownRefresh()
							this.isPullLoading=false
						}
						if(this.isLodingToast){
							this.hideLoading()
							this.isLodingToast=false
						}
						if(this.currentPage>=res.data.data.pageInfo.pageCount){
							this.status='noMore'
						}else{
							this.status='nome'
						}
					}
				})
			},
			getNextPage(){
				this.currentPage=++this.currentPage
				this.status='loading'
				this.getlist()
			},
			showLoading(title='正在加载'){
				uni.showLoading({
					title:title
				})
			},
			hideLoading(){uni.hideLoading()}
		},
		computed: {
			...mapState(['token'])
		},
		onLoad(option) {
			this.date=option.date
		},
		onShow() {
			this.isLodingToast=true
			this.showLoading()
			this.getlist()
		},
		onPullDownRefresh() {
			this.status='loading'
			this.currentPage=1
			this.isLodingToast=true
			this.isPullLoading=true
			this.showLoading()
			this.getlist()
		},
		onReachBottom() {
			if(this.currentPage>=this.pageInfo.pageCount){
				this.status='noMore'
				uni.showToast({
					title:'没有更多了',
					icon:'none'
				})
				return 
			}
			this.getNextPage()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style scoped>
	/**/
	.m_fcg {
		color: #9a9898;
	}

	.m_fcr {
		color: #e21e6e;
	}
	
	.person-item-info{
		font-size: 28rpx;
	}
	
	.m_marginl10 {
		display: inline-block;
		margin-left: 0;
	}
	
	.m_fs{
		font-size: 26rpx;
	}
	/**/
	.person-item-wrap {
		padding: 20rpx;
	}

	.person-item-avatar {
		width: 17vw;
		height: 17vw;
		margin-right: 20rpx;
	}

	.person-item-info-order-number,
	.person-item-info-order-argu {
		/* width: calc(85vw - 60rpx); */
		flex:1;
		justify-content: space-between;
	}
	.person-item-amount{
		height: 100%;
		
	}
</style>
